<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<ng-container *ngIf="detailJobType.includes(job.type) && isOceanProtect && isShowTab">
    <lv-tabs class="job-content">
        <lv-tab lvTitle="{{'insight_job_info_label' | i18n}}">
            <ng-container *ngTemplateOutlet="jobContent"></ng-container>
        </lv-tab>
        <lv-tab lvTitle="{{'insight_job_strategy_info_label' | i18n}}">
            <aui-job-strategy [job]="job"></aui-job-strategy>
        </lv-tab>
    </lv-tabs>
</ng-container>
<ng-container *ngIf="!detailJobType.includes(job.type) || !isOceanProtect || !isShowTab">
    <ng-container *ngTemplateOutlet="jobContent"></ng-container>
</ng-container>

<ng-template #jobContent>
    <ng-container *ngFor="let jobForm of _values(this.jobForms)">
        <div class='job-content aui-gutter-column-xxl'>
            <div class="aui-gutter-column-lg">
                <h3>{{jobForm.title}}</h3>
            </div>
            <lv-form>
                <lv-form-column *ngFor='let column of jobForm.values' lvWidth="50%">
                    <lv-form-item *ngFor='let item of column'>
                        <lv-form-label>
                            {{item.label}}
                            <i *ngIf="item.key === 'speed'" lv-icon="aui-icon-help" lv-tooltip="{{speedTipText}}"
                                lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
                        </lv-form-label>
                        <lv-form-control>
                            <ng-container [ngSwitch]="item.key">
                                <ng-container *ngSwitchCase="'status'">
                                    <ng-container
                                        *ngIf="['RUNNING', 'READY', 'ABORTING'].includes(job.status); else elseTemplate">
                                        <lv-progress [lvValue]="job.progress" [lvWidth]="100" [lvStatus]="'normal'"
                                            [lvColors]="job.colors" class="progress-width"
                                            [ngClass]="{'aborting-progress': ['ABORTING'].includes(job.status)}">
                                        </lv-progress>
                                    </ng-container>
                                    <ng-container *ngIf="showConfirmButton">
                                        <button lv-button lvType="link" (click)="feedbackResult()"
                                            class="feedback-size">
                                            {{ 'insight_feedback_restore_result_label' | i18n }}</button>
                                    </ng-container>
                                    <ng-template #elseTemplate>
                                        <lv-group lvGutter='8px'>
                                            <aui-status [value]="item.value" type="Job_status">
                                            </aui-status>
                                            <ng-container *ngIf="job.status === dataMap.Job_status.failed.value">
                                                <span lv-overflow class="failed-tip">
                                                    ({{job.progress}}%)
                                                </span>
                                            </ng-container>
                                        </lv-group>
                                    </ng-template>

                                    <ng-container *ngIf="snapshotRestore && isLiveMount">
                                        <span class="aui-link" id="outerClosable"
                                            (click)="report(item)">{{'common_report_jobs_result_label'|i18n}}</span>
                                    </ng-container>

                                </ng-container>
                                <ng-container *ngSwitchCase="'slaName'">
                                    <lv-group lvGutter="4px">
                                        <span [ngClass]="{'aui-link':!jumpDisable, 'aui-link-disabled': jumpDisable}"
                                            (click)="getSlaDetail()">{{(infoUpdated? newName : item.value) | nil}}
                                        </span>
                                        <span *ngIf="infoUpdated">({{'insight_job_sla_name_updated_label' |
                                            i18n}})</span>
                                    </lv-group>
                                </ng-container>
                                <ng-container *ngSwitchCase="'mountName'">
                                    <lv-group lvGutter="4px">
                                        <span [ngClass]="{'aui-link':!jumpDisable, 'aui-link-disabled': jumpDisable}"
                                            (click)="getMountDetail()">{{(infoUpdated? newName : item.value) | nil}}
                                        </span>
                                        <span *ngIf="infoUpdated">({{'insight_job_sla_name_updated_label' |
                                            i18n}})</span>
                                    </lv-group>
                                </ng-container>
                                <ng-container *ngSwitchCase="'retentionPolicy'">
                                    <ng-container *ngIf="item.value === schedulePolicy.AfterBackupDone">
                                        <span lv-overflow>
                                            {{'explore_after_backup_done_label'|i18n}}
                                        </span>
                                    </ng-container>
                                    <ng-container *ngIf="item.value === schedulePolicy.PeriodSchedule">
                                        <div class="main-schedule-policy-container">
                                            <div class="main-schedule">
                                                <div>
                                                    {{executionPeriodLabel}}{{spaceLabel}}{{triggerPolicy.scheduleInterval}}
                                                    {{spaceLabel}}{{triggerPolicy.scheduleIntervalUnit | textMap:
                                                    'Interval_Unit'}}
                                                </div>
                                            </div>
                                        </div>
                                    </ng-container>
                                    <ng-container *ngIf="!item?.value">--</ng-container>
                                </ng-container>
                                <ng-container *ngSwitchCase="'retentionTime'">
                                    <span lv-overflow>
                                        <ng-container [ngSwitch]="item.value">
                                            <ng-container *ngSwitchCase="retentionPolicy.Permanent">
                                                {{'explore_permanent_retention_label'|i18n}}
                                            </ng-container>
                                            <ng-container *ngSwitchCase="retentionPolicy.LatestOne">
                                                {{'explore_always_latest_label'|i18n}}
                                            </ng-container>
                                            <ng-container *ngSwitchCase="retentionPolicy.FixedTime">
                                                {{'common_retention_label'|i18n}}{{spaceLabel}}{{triggerPolicy.retentionValue}}
                                                {{spaceLabel}}{{triggerPolicy.retentionUnit | textMap:'Interval_Unit'}}
                                            </ng-container>
                                            <ng-container *ngSwitchDefault>
                                                --
                                            </ng-container>
                                        </ng-container>
                                    </span>
                                </ng-container>
                                <ng-container *ngSwitchCase="'exerciseName'">
                                    <span class="aui-link" (click)="getExerciseDetail()">{{item.value | nil}}</span>
                                </ng-container>
                                <ng-container *ngSwitchCase="'exercisePeriod'">
                                    <ng-container
                                        *ngIf="triggerPolicy.type === dataMap.drillType.period.value; else elseTemplate">
                                        <lv-group lvDirection='vertical'>
                                            <span lv-overflow>
                                                <ng-container *ngIf="_isEn">
                                                    {{'protection_execution_period_label' |
                                                    i18n}}:{{triggerPolicy.interval}} {{triggerPolicy.intervalUnit |
                                                    textMap:'recoveryDrillUnit'}}
                                                </ng-container>
                                                <ng-container *ngIf="!_isEn">
                                                    {{'protection_execution_period_label' |
                                                    i18n}}：{{triggerPolicy.interval}}{{triggerPolicy.intervalUnit |
                                                    textMap:'recoveryDrillUnit'}}
                                                </ng-container>
                                            </span>
                                        </lv-group>
                                    </ng-container>
                                </ng-container>
                                <ng-container *ngSwitchCase="'copyType'">
                                    <span
                                      *ngIf="
                                        [
                                          dataMap.Resource_Type.fusionComputeVirtualMachine
                                            .value,
                                          dataMap.Resource_Type.FusionCompute.value,
                                          dataMap.Resource_Type.HCS.value
                                        ].includes(job.sourceType) ||
                                        [
                                          dataMap.Resource_Type.ElasticsearchBackupSet.value,
                                          dataMap.Resource_Type.HBaseBackupSet.value,
                                          dataMap.Resource_Type.HDFSFileset.value,
                                          dataMap.Resource_Type.HiveBackupSet.value,
                                          dataMap.Resource_Type.virtualMachine.value,
                                          dataMap.Resource_Type.openStackCloudServer.value,
                                          dataMap.Resource_Type.tdsqlInstance.value,
                                          dataMap.Resource_Type.kubernetesNamespaceCommon.value,
                                          dataMap.Resource_Type.kubernetesDatasetCommon.value
                                        ].includes(job.sourceSubType);
                                        else normalType
                                      "
                                      lv-overflow
                                    >
                                      {{ item.value | textMap: 'specialBackUpType' }}
                                    </span>
                                    <ng-template #normalType>
                                      {{
                                        item.value | textMap: 'CopyData_Backup_Type'
                                      }}
                                    </ng-template>
                                  </ng-container>
                                  <ng-container *ngSwitchCase="'jobId'">
                                    <lv-group lvGutter="4px" class="copy-container">
                                        <div lv-overflow class='value'>
                                            {{item.value | nil}}
                                        </div>
                                        <i lv-icon="aui-icon-copy" class="copy-btn" (click)="copyJobId(item.value)"></i>
                                    </lv-group>
                                </ng-container>
                                <ng-container *ngSwitchDefault>
                                    <div lv-overflow class='value'>
                                        {{item.value | nil}}
                                    </div>
                                </ng-container>
                            </ng-container>
                        </lv-form-control>
                    </lv-form-item>
                </lv-form-column>
            </lv-form>
        </div>
    </ng-container>

    <aui-job-event [job]="job" [timeZone]="timeZone" (showManualFeedback)="showManualFeedback($event)" #jobEvent>
    </aui-job-event>
</ng-template>

<ng-template #elseTemplate>
    --
</ng-template>